<template>
    <div style="width: 100%; height: 94%; padding-top: 2%; text-align: center;">
        <div style="height: 100%; width: auto;display: inline-block;position: relative;">
            <img ref="map" @load="imgload" src="../images/map.png" class="map">
            <div class="biaoshi" v-for="(item,index) in alldata" :key="index" :style="{left: leftpos(item.REGION_NAME),top:toppos(item.REGION_NAME)}">
                <span ref="bsbody" class="bsbody">{{item.ACCS_CNT}}</span>
                <span class="bsb"></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "china",
        data(){
          return{
              map:{
                  '河北':[721,344],//
                  '山西':[682,377],
                  '辽宁':[853,255],
                  '吉林':[884,198],
                  '黑龙江':[902,139],
                  '江苏':[832,450],
                  '浙江':[833,528],
                  '安徽':[775,493],
                  '福建':[832,634],
                  '江西':[764,580],
                  '山东':[762,389],
                  '河南':[692,439],
                  '湖北':[700,524],
                  '湖南':[694,585],
                  '广东':[727,690],
                  '海南':[652,788],
                  '四川':[533,544],
                  '贵州':[578,626],
                  '云南':[499,664],
                  '陕西':[615,458],
                  '甘肃':[528,400],
                  '青海':[412,412],
                  '台湾':[887,659],
                  '北京':[757,307],
                  '天津':[788,289],
                  '上海':[871,504],
                  '重庆':[603,558],
                  '内蒙古':[657,294],
                  '广西':[616,696],
                  '宁夏':[559,375],
                  '新疆':[275,234],
                  '西藏':[313,535],
                  '香港':[762,720],
                  '澳门':[721,716]
              }
          }
        },
        methods:{
            imgload(){

            },
            leftpos(name){
                if(this.map[name]){
                    return this.map[name][0]/1057*100 + '%';
                }else {
                    return '0%';
                }
            },
            toppos(name){
                if(this.map[name]){
                    return this.map[name][1]/825*100 + '%';
                }else {
                    return '0%';
                }
            }
        },
        props:['alldata'],
        mounted(){
            if(this.$refs.bsbody){
                this.$refs.bsbody.forEach((item)=>{
                    item.style.left = -item.clientWidth/2-1 + 'px';
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .map{
        height: 100%;
    }
    .biaoshi{
        position: absolute;
        width: 0px;
        height: 0px;
        background-color: red;
    }
    .bsb{
        position: absolute;
        width: 14px;
        height: 14px;
        background-color: #f75050;
        left: -8px;
        top: -18px;
        transform: rotate(51deg) skewX(20deg);
        z-index: 1;
    }
    .bsbody{
        background-color: #f75050;
        white-space: nowrap;
        color: #fff;
        position: absolute;
        z-index: 2;
        top: -24px;
        height: 20px;
        border-radius: 10px;
        padding: 0 4px;
        line-height: 20px;
        font-size: 16px;
    }
</style>
